import React, { Component } from 'react';
import { Form, Input, Select } from 'antd';
import PropTypes from 'prop-types';
import './modal.css';


const { Option } = Select;
const  provinceArr=['河北省','山西省','辽宁省','吉林省','黑龙江省','江苏省','浙江省','安徽省','福建省','江西省','山东省','河南省','湖北省',
  '湖南省','广东省','海南省','四川省','贵州省','云南省','陕西省','甘肃省','青海省','台湾省','内蒙古自治区','广西壮族自治区','西藏自治区','宁夏回族自治区',
  '新疆维吾尔自治区','北京市','天津市','上海市','重庆市','香港特别行政区','澳门特别行政区']
class AddOrganForm extends Component {

  static propTypes = {
    orgParentName: PropTypes.string.isRequired,
    setForm: PropTypes.func.isRequired,
  }

  formRef = React.createRef();  // form对象  
  
  componentDidMount() {
    this.props.setForm(this.formRef);  // 调用父组件传递的函数，目的是将 参数以实参的形式传递给父组件  
  }

  handleChange=(value) =>{
    console.log(`selected ${value}`);
    console.log(typeof(value));
  }

  render() {
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    const {orgParentName} = this.props;
    return (
      <div>
        <Form 
          {...layout} 
          ref={this.formRef}   
          name="control-ref" 
          onFinish={this.onFinish}
        >  
          <Form.Item 
            name="org_parent_name" 
            label="父矿区名称" 
            rules={[{ required: true }]}
          >
            {console.log("父组织名称",orgParentName)}
            <Input value={orgParentName} disabled/>
          </Form.Item>

          <Form.Item 
            name="org_name" 
            label="矿区名称" 
            rules={[{ required: true }]}
          >
            <Input placeholder="请输入矿区名称"/>
          </Form.Item>

          <Form.Item 
            name="org_province" 
            label="所在省份" 
            rules={[{ required: true }]}
          >
            <Select style={{ width: 200 }} onChange={this.handleChange} placeholder="请选择所在省份">
              {
                provinceArr.map(item=>{
                  return <Option value={item}>{item}</Option>
                })
              }
            </Select>
          </Form.Item>


          <Form.Item
            name="org_contact"
            label="联系方式"
            rules={[{ required: true, message: '请输入矿区联系方式!' }]}
          >
            <Input placeholder="请输入矿区联系方式"/>
          </Form.Item>

          <Form.Item
            name="org_address"
            label="矿区地址"
            rules={[{ required: true, message: '请输入矿区地址!' }]}
          >
            <Input placeholder="请输入矿区地址"/>
          </Form.Item>

          <Form.Item name="org_remark" label="备注">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </div>  
    )
  }
}

export default AddOrganForm;